﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Detail.aspx.cs" Inherits="_Categories" Theme="Default" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/banners.js"></script>
    <%-- <script type="text/javascript" src="js/imagesDetail.js"></script>--%>
    <link rel="stylesheet" href="styles/banners.css" />
    <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <link rel="stylesheet" href="styles/nivo-slider.css" />
    <%-- <link rel="stylesheet" href="styles/imagesDetail.css" />--%>
    <script type="text/javascript" language="javascript">
        //<![CDATA[

        $(document).ready(function () {
            banner1();
            banner2();
            banner3();
            $('#imagereel_detail').nivoSlider({
                effect: 'sliceDown', // Specify sets like: 'fold,fade,sliceDown'
                //slices: 15, // For slice animations
                boxCols: 8, // For box animations
                boxRows: 4, // For box animations
                animSpeed: 500, // Slide transition speed
                pauseTime: 3000, // How long each slide will show
                startSlide: 0, // Set starting Slide (0 index)
                directionNav: true, // Next & Prev navigation
                controlNav: false, // 1,2,3... navigation
                controlNavThumbs: true, // Use thumbnails for Control Nav
                pauseOnHover: true, // Stop animation while hovering
                manualAdvance: true, // Force manual transitions
                prevText: '<', // Prev directionNav text
                nextText: '>', // Next directionNav text
                randomStart: false // Start on a random slide

            });

            $('#drpCategories').change(function () {
                window.location.href = "Categories.aspx?c=" + $('#drpCategories').val();
            });
            
        });

        function add(d, p, q) {
            PageMethods.Add(d, p, q,
                function (t) {
                    document.getElementById("total").textContent = t;
                    alert("Se agregó el producto al carrito");
                },
                function (error) {
                    alert(error.get_message());
                });
        }



        //]]>
    </script>
    <style type="text/css">
        .detailImages
        {
            height: 446px;
            width: 365px;
            background-color: White;
            border: solid 0px gray;
            border-bottom: solid 1px #DFDCD5;
            border-right: solid 1px #DFDCD5;
        }

        .nivo-prevNav
        {
            font-family: serif;
            font-size: 38px;
            color: #fff;
            background: rgb(142, 164, 40);
            opacity: 0.85;
            padding-top: 10px;
            padding-bottom: 12px;
            height: 38px;
            width: 45px;
            text-align: center;
            vertical-align: middle;
            font-weight: 100;
        }

        .nivo-nextNav
        {
            font-family: serif;
            font-size: 38px;
            color: #fff;
            background: rgb(142, 164, 40);
            opacity: 0.85;
            padding-top: 10px;
            padding-bottom: 12px;
            height: 38px;
            width: 45px;
            text-align: center;
            vertical-align: middle;
            font-weight: 100;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:HiddenField ID="scid" runat="server" Value="0" />
    <asp:HiddenField ID="pn" runat="server" Value="1" />
    <div class="category-left" style="width: 100%;">
        <div class="category-map">
            <asp:HyperLink ID="lblRoute" runat="server" CssClass="pathLink"></asp:HyperLink>
            <asp:HyperLink ID="lblRoute1" runat="server" CssClass="pathLink"></asp:HyperLink>
            <asp:HyperLink ID="lblRoute2" runat="server" CssClass="pathLink"></asp:HyperLink>
            <asp:HyperLink ID="lblRoute3" runat="server" CssClass="pathLink"></asp:HyperLink>
        </div>
        <br />
        <div style="float: left;">
            <div class="subcategories-left">
                <asp:DropDownList ID="drpCategories" runat="server" CssClass="box-brop" ClientIDMode="Static">
                    <asp:ListItem Text="Categoria" Value="0"></asp:ListItem>
                </asp:DropDownList>
                <div class="subtegories" id="subcategories" runat="server">
                </div>
            </div>
            <br />
            <br />
            <div class="category-right">
                <div class="main_view">
                    <div class="window" id="window">
                        <div class="image_reel" id="imagereel" runat="server" clientidmode="Static">
                        </div>
                        <div class="paging" id="paging" runat="server" clientidmode="Static">
                        </div>
                    </div>
                </div>
                <div class="main_view">
                    <div class="window" id="window2">
                        <div class="image_reel" id="imagereel2" runat="server" clientidmode="Static">
                        </div>
                        <div class="paging2" id="paging2" runat="server" clientidmode="Static">
                        </div>
                    </div>
                </div>
                <div class="main_view">
                    <div class="window" id="window3">
                        <div class="image_reel" id="imagereel3" runat="server" clientidmode="Static">
                        </div>
                        <div class="paging" id="paging3" runat="server" clientidmode="Static">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="categories-content" style="border: solid  0px gray; width: 760px; float: right;">
            <div style="float: left;">
                <div class="detailImages" id="imagereel_detail" runat="server" clientidmode="Static">
                </div>
                <br />
                <%if (!hide)
                  { %>
                <div class="months-floracion" id="monthsFloracion" runat="server">
                    <div style="font-family: Arial; font-size: 16px; width: 85px; float: left; margin-top: 12px; margin-left: 15px;">
                        Meses de<br />
                        Floración
                    </div>
                    <div style="float: left; width: 256px; height: 43px;" class="floracion-list">
                        <div id="floracionEne" runat="server">
                            Ene
                        </div>
                        <div id="floracionFeb" runat="server">
                            Feb
                        </div>
                        <div id="floracionMar" runat="server">
                            Mar
                        </div>
                        <div id="floracionAbr" runat="server">
                            Abr
                        </div>
                        <div id="floracionMay" runat="server">
                            May
                        </div>
                        <div id="floracionJun" runat="server">
                            Jun
                        </div>
                        <div id="floracionJul" runat="server">
                            Jul
                        </div>
                        <div id="floracionAgo" runat="server">
                            Ago
                        </div>
                        <div id="floracionSep" runat="server">
                            Sep
                        </div>
                        <div id="floracionOct" runat="server">
                            Oct
                        </div>
                        <div id="floracionNov" runat="server">
                            Nov
                        </div>
                        <div id="floracionDiv" runat="server">
                            Dic
                        </div>
                    </div>
                </div>
                <div class="months-frutos" id="monthsFrutos" runat="server">
                    <div style="font-family: Arial; font-size: 16px; width: 85px; float: left; margin-top: 12px; margin-left: 15px;">
                        Meses de<br />
                        Frutos
                    </div>
                    <div style="float: left; width: 256px; height: 43px;" class="frutos-list">
                        <div id="frutosEne" runat="server">
                            Ene
                        </div>
                        <div id="frutosFeb" runat="server">
                            Feb
                        </div>
                        <div id="frutosMar" runat="server">
                            Mar
                        </div>
                        <div id="frutosAbr" runat="server">
                            Abr
                        </div>
                        <div id="frutosMay" runat="server">
                            May
                        </div>
                        <div id="frutosJun" runat="server">
                            Jun
                        </div>
                        <div id="frutosJul" runat="server">
                            Jul
                        </div>
                        <div id="frutosAgo" runat="server">
                            Ago
                        </div>
                        <div id="frutosSep" runat="server">
                            Sep
                        </div>
                        <div id="frutosOct" runat="server">
                            Oct
                        </div>
                        <div id="frutosNov" runat="server">
                            Nov
                        </div>
                        <div id="frutosDiv" runat="server">
                            Dic
                        </div>
                    </div>
                </div>
                <div class="detail-preferences" id="Div1" runat="server">
                    Preferencias
                </div>
                <div class="preferences-list" id="preferencesList" runat="server">
                </div>
                <%} %>
            </div>
            <div style="float: right; width: 375px; border: solid 0px gray;">
                <div id="productName" runat="server" class="product-name">
                </div>
                <%if (!hide)
                  { %>
                <div id="scientificName" runat="server" class="scientific-name">
                </div>
                <%} %>
                <div id="socialPlugins" runat="server" class="social-plugins">
                    <script type="text/javascript">
                        var addthis_config = {
                            pubid: "ra-4f6bffb512ef7c15"
                        }
                    </script>

                    <p>
                        <!-- AddThis Button BEGIN -->
                    </p>
                    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                        <a class="addthis_button_preferred_1"></a>
                        <a class="addthis_button_preferred_2"></a>
                        <a class="addthis_button_preferred_3"></a>
                    </div>
                    <script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ef9becc3931736f"></script>
                    <!-- AddThis Button END -->
                </div>
                <div id="productDescription" runat="server" class="product-description">
                </div>
                <div id="productSize" runat="server" class="product-description">
                </div>
                <div id="purchaseOptions" runat="server" class="purchase-options">
                </div>
                <div id="productsList" runat="server" class="products-list">
                </div>
            </div>
            <br />
            <div style="height: 25px;">
            </div>
            <div class="selected-tab" id="plantacionTab" onclick="tabs(1);" runat="server" clientidmode="Static">
                Plantación
            </div>
            <div class="unselected-tab" id="mantenimientoTab" onclick="tabs(2);" runat="server"
                clientidmode="Static">
                Mantenimiento
            </div>
            <div class="unselected-tab" id="detallesTab" onclick="tabs(3);" runat="server" clientidmode="Static">
                Detalles
            </div>
            <br />
            <div id="plantacionText" class="plantacion-text" runat="server" style="display: block;">
            </div>
            <div id="mantenimientoText" class="plantacion-text" runat="server" style="display: none;">
            </div>
            <div id="detallesText" class="plantacion-text" runat="server" style="display: none;">
            </div>
            <br />
            <br />
            <div class="home-products">
                <asp:Label ID="lblHomeOfferProductsTitle" runat="server" Text="Productos relacionados"
                    CssClass="home-offer-products-title"></asp:Label>
            </div>
            <div class="home-products-list" id="homeOffers" runat="server">
            </div>
        </div>
        <br style="clear: both;" />
    </div>
    <script type="text/javascript">
        function tabs(tab) {
            document.getElementById("plantacionTab").className = "unselected-tab";
            document.getElementById("mantenimientoTab").className = "unselected-tab";
            document.getElementById("detallesTab").className = "unselected-tab";
            document.getElementById("ContentPlaceHolder1_plantacionText").style.display = "none";
            document.getElementById("ContentPlaceHolder1_mantenimientoText").style.display = "none";
            document.getElementById("ContentPlaceHolder1_detallesText").style.display = "none";

            if (tab == 1) {
                document.getElementById("ContentPlaceHolder1_plantacionText").style.display = "block";
                document.getElementById("plantacionTab").className = "selected-tab";
            }
            else if (tab == 2) {
                document.getElementById("ContentPlaceHolder1_mantenimientoText").style.display = "block";
                document.getElementById("mantenimientoTab").className = "selected-tab";
            } else {
                document.getElementById("ContentPlaceHolder1_detallesText").style.display = "block";
                document.getElementById("detallesTab").className = "selected-tab";
            }
        }
    </script>
</asp:Content>
